<script>
import OAuthImg from "../../components/OAuthImg.vue";
import {ElMessage} from "element-plus";
import router from "../../router/index.js";
import request from "../../utils/Request.js";
import CryptoJS from "crypto-js";
import {Back} from "@element-plus/icons-vue";

export default {
  components: {Back, OAuthImg},
  data() {
    return {
      user: {
        email: '',
        password: ''
      },
      rules: {
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'change'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'},
        ],
        password: [{
          validator: (rule, value, callback) => {
            if (value === '')
              callback(new Error('请输入密码'))
            else if (!new RegExp("^[a-zA-Z0-9]{6,18}$").test(value))
              callback(new Error('请输入6到18位的不包括特殊字符的密码'))
            else
              callback()
          }, trigger: 'blur'
        }],
      },
      disableButton: false
    }
  },
  methods: {
    onSubmit() {
      let form = this.$refs['formRef']
      console.log(this.user)

      form.validate((valid) => {
        if (valid) {
          this.disableButton = true
          // 登录
          request({
            method: 'post',
            url: '/api/uaa/login',
            data: {
              email: this.user.email,
              password: CryptoJS.SHA256(this.user.password).toString(CryptoJS.enc.Hex)
            }
          })
              .then(resp => {
                if (resp.data.code === 0) {
                  router.push('/project')
                } else {
                  ElMessage.error(resp.data.msg)
                }
                this.disableButton = false
              })
              .catch(() => this.disableButton = false)
        } else {
          ElMessage.error('请检查是否填写完整')
        }
      })

    }
  },
  created() {
    let params = router.currentRoute.value.query
    if ('email' in params) {
      this.user.email = CryptoJS.enc.Utf8.stringify(CryptoJS.enc.Base64.parse(params.email))
    }
  }
}
</script>

<template>

  <el-icon @click="() => this.$router.back()" size="30" style="cursor: pointer">
    <Back/>
  </el-icon>
  <div class="outer">
    <h1 class="w-300 text-center">
      <router-link class="a-style mb-5" to="/" style="color: #4d4d4d">登录</router-link>
    </h1>

    <!--    FROM-->
    <el-form
        ref="formRef"
        :model="user"
        status-icon
        :rules="rules"
    >
      <el-form-item prop="email" key="email">
        <el-input class="w-300 mb-5" size="large" v-model="user.email" placeholder="邮箱" clearable
                  maxlength="64"/>
      </el-form-item>
      <el-form-item prop="password" key="password">
        <el-input class="w-300 mb-5" size="large" v-model="user.password" placeholder="密码" type="password"
                  show-password
                  clearable maxlength="64"/>
      </el-form-item>


      <p class="w-300 font-style text-center " style="font-size: 12px">
        登录即同意
        <router-link to="/term/service" class="a-style">服务条款</router-link>
        和
        <router-link to="/term/privacy" class="a-style">隐私协议</router-link>
      </p>
      <el-form-item key="login">
        <el-button class="w-300" type="primary" @click="onSubmit" size="large" :disabled="disableButton"
                   color="#ff9800" dark
        >登录
        </el-button>
      </el-form-item>
    </el-form>
    <!--FROM END-->

    <p class="w-300 text-center font-style">还没账号？
      <router-link class="a-style" to="/reg">免费注册</router-link>
      |
      <router-link class="a-style" to="/forget">找回密码</router-link>
    </p>
    <OAuthImg/>
  </div>
</template>

<style scoped>

.outer {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.font-style {
  font-size: 14px;
  color: #737679;
}

.a-style {
  text-decoration: none;
  color: cornflowerblue;
}

</style>